antd#Switch TypeScript Examples

PermissionItem: React.FC<PermissionItemProps> = React.memo(
  (props) => {
    return (
      <div className="mx-2 py-3 border-b border-white border-opacity-20">
        <Row>
          <Col flex={1} className="font-bold">
            {props.title}
          </Col>

          <Col>
            <Switch />
          </Col>
        </Row>

        <div className="text-gray-400">{props.desc}</div>
      </div>
    );
  }
)

public render() {
    const uiProps = this.props.schema['ui:props'] || {};

    return (
      <Switch
        {...uiProps}
        checked={this.checked}
        checkedChildren={uiProps.checkedChildren as ReactNode || '是'}
        unCheckedChildren={uiProps.uncheckedChildren as ReactNode || '否'}
        onChange={(checked: boolean) => {
          this.props.onChange?.(this.encodeValue(checked));
        }}
      />
    );
  }

StreamPanel: React.FC<StreamPanelProps> = ({
  header,
  streamUid,
  initiallySelectedStreams,
  checked: _checked,
  handleToggleStream,
  children,
  ...rest
}) => {
  const [checked, setChecked] = useState<boolean>(
    _checked ||
      initiallySelectedStreams.some(selected => sourceEditorUtils.getSelectedStreamUid(selected) === streamUid)
  )

  const toggle = (checked: boolean, event: MouseEvent) => {
    event.stopPropagation() // hacky way to prevent collapse triggers
    setChecked(checked)
    handleToggleStream(checked, streamUid)
  }

  useEffect(() => {
    if (_checked !== undefined) setChecked(_checked)
  }, [_checked])

  return (
    <Collapse.Panel
      {...rest}
      key={streamUid}
      header={header}
      extra={<Switch checked={checked} className="absolute top-3 right-3" onChange={toggle} />}
    >
      {children}
    </Collapse.Panel>
  )
}

export function OptOutCapture(): JSX.Element {
    const { user, userLoading } = useValues(userLogic)
    const { updateUser } = useActions(userLogic)

    return (
        <div>
            <p>
                PostHog uses PostHog (unsurprisingly!) to capture information about how people are using the product. We
                believe that product analytics is crucial to making PostHog the most useful it can be, for everyone.
            </p>
            <p>
                We also understand there are many reasons why people don't want to or aren't allowed to send this usage
                data. If you would like to anonymize your personal usage data, just tick the box below.
            </p>
            <Switch
                data-attr="anonymize-data-collection"
                onChange={(checked) => updateUser({ anonymize_data: checked })}
                defaultChecked={user?.anonymize_data}
                loading={userLoading}
                disabled={userLoading}
            />
            <label
                htmlFor="anonymize-data-collection"
                style={{
                    marginLeft: '10px',
                }}
            >
                Anonymize my data
            </label>
        </div>
    )
}

export default function RegisterFieldDemo() {
  const [readonly, setReadonly] = useState<boolean>(false)
  const handleConfirm = (form: any) => {
    console.log(form)
    alert(JSON.stringify(form))
  }

  return (
    <>
      <p>
        <label style={{ marginRight: 4 }}>只读模式</label>
        <Switch defaultChecked={readonly} onChange={value => setReadonly(value)} />
      </p>
      <AyForm readonly={readonly} fields={fields} style={{ width: 400, margin: '0 auto' }} onConfirm={handleConfirm}>
        <AyButton type="primary" htmlType="submit" style={{ marginLeft: 120 }}>
          提交
        </AyButton>
      </AyForm>
    </>
  )
}

export function IPCapture(): JSX.Element {
    const { updateCurrentTeam } = useActions(teamLogic)
    const { currentTeam, currentTeamLoading } = useValues(teamLogic)

    return (
        <div>
            <Switch
                id="anonymize-ip"
                onChange={(checked) => {
                    updateCurrentTeam({ anonymize_ips: checked })
                }}
                checked={currentTeam?.anonymize_ips}
                loading={currentTeamLoading}
                disabled={currentTeamLoading}
            />
            <label
                style={{
                    marginLeft: '10px',
                }}
                htmlFor="anonymize-ip"
            >
                Discard client IP data
            </label>
        </div>
    )
}

SwitchWithLabel: React.FC<SwitchWithLabelProps> = ({ id, defaultChecked, onChange, label }) => {
  const [state, setState] = useState(defaultChecked)

  const triggerChange = (changedValue: boolean) => {
    onChange?.(changedValue)
  }

  const onValueChange = (value: boolean, e: MouseEvent) => {
    setState(value)
    triggerChange(value)
  }

  return (
    <div>
      <Switch className={"mb-0.5"} onChange={onValueChange} checked={state} defaultChecked={!!defaultChecked} />
      {label && <span className={"pl-3"}>{label}</span>}
    </div>
  )
}

export default function RegisterCascaderFieldDemo() {
  const [readonly, setReadonly] = useState<boolean>(false)

  const handleConfirm = (form: any) => {
    console.log(form)
    alert(JSON.stringify(form))
  }

  return (
    <>
      <p>
        <label style={{ marginRight: 4 }}>只读模式</label>
        <Switch defaultChecked={readonly} onChange={value => setReadonly(value)} />
      </p>
      <AyForm readonly={readonly} fields={fields} style={{ width: 400, margin: '0 auto' }} onConfirm={handleConfirm}>
        <AyButton type="primary" htmlType="submit" style={{ marginLeft: 120 }}>
          提交
        </AyButton>
      </AyForm>
    </>
  )
}

TelemetrySettingsFormComponent: React.FC<Props> = ({
  isTelemetryEnabled,
  handleChangeTelemetry: _handleChangeTelemetry,
}) => {
  const [isChangeTelemetryInProgress, setIsChangeTelemetryInProgress] = useState<boolean>(false)
  const handleChangeTelemetry = async (enabled: boolean) => {
    setIsChangeTelemetryInProgress(true)
    try {
      await _handleChangeTelemetry(enabled)
    } finally {
      setIsChangeTelemetryInProgress(false)
    }
  }

  return (
    <span className="flex items-center">
      <Switch
        size="small"
        loading={isChangeTelemetryInProgress}
        checked={isTelemetryEnabled}
        onChange={handleChangeTelemetry}
      />
      <span className="ml-2">
        {"Allow us to track the application state in order to detect and respond to any issues."}
      </span>
    </span>
  )
}

MessagesSearch: React.FC = () => {
	const { setUnseen } = useActions(messagesLogic);

	const [form] = Form.useForm();

	const onFinish = ({ unseen }: any) => {
		setUnseen(unseen);
	};

	return (
		<Form layout={'inline'} form={form} name='basic' initialValues={{ remember: true }} onFinish={onFinish}>
			<Form.Item
				label='Unseen'
				name='unseen'
				valuePropName='checked'
				tooltip='If true, then returns only unseen messages'
			>
				<Switch />
			</Form.Item>
			<Form.Item>
				<Button type='primary' htmlType='submit'>
					Search
				</Button>
			</Form.Item>
		</Form>
	);
}

public render() {
        const {env, langAll, onLangAllChange, markerVisible, onMarkerVisibleChange} = this.props;
        return (
            <div className='toolbar'>
                {/* {
                    !env.isMobile && (
                        <Tooltip title={<FormattedMessage id={langAll ? 'toolbar.showall.tip' : 'toolbar.showall.tip_off'}/>} >
                            <div className='toolbar_langall'>
                                <span className='toolbar_showall'><FormattedMessage id='toolbar.showall'/>:</span><Switch style={langAll ? {backgroundColor: 'skyblue'} : {backgroundColor: 'grey'}} checked={langAll} onChange={() => onLangAllChange && onLangAllChange()} />
                            </div>
                        </Tooltip>
                    )
                } */}
                {
                    !env.isMobile && (
                        <Tooltip title={<FormattedMessage id={markerVisible ? 'toolbar.marker.tip' : "toolbar.marker.tip_off"}/>} >
                            <div className='toolbar_langall'>
                                <span className='toolbar_showall'><FormattedMessage id='toolbar.marker'/>:</span><Switch style={markerVisible ? {backgroundColor: 'skyblue'} : {backgroundColor: 'grey'}} checked={markerVisible} onChange={() => onMarkerVisibleChange && onMarkerVisibleChange()} />
                            </div>
                        </Tooltip>
                    )
                }
                <div className='toolbar_source' onClick={() => this.props.onClickSource()}>
                    <Source_Svg />
                </div>
                {/* <div className='toolbar_source' onClick={() => this.props.onSearch()}>
                    <Search_Svg />
                </div> */}
                {/* <div className='toolbar_locale' onClick={this.handleClickLocale}>
                    {
                        env.lang == 'en' ? <En_Svg style={{fill: 'lightgrey'}} /> : <Zh_Svg style={{fill: '#e72620'}}/>
                    }
                </div> */}
                {/* <div id="style-switch-btn" className={`button ${this.props.theme === 'dark' ? 'light' : 'dark'}`}
                    onClick={() => this.props.onSwitchTheme()}
                ><i className="fas fa-lightbulb"/></div> */}
            </div>
        )
    }

MailboxSearch = () => {
	const { setSpecialUse } = useActions(mailboxesLogic);

	const [form] = Form.useForm();

	const onFinish = ({ specialUse }: any) => {
		setSpecialUse(specialUse);
	};

	return (
		<Form
			layout={'inline'}
			form={form}
			name='basic'
			size='small'
			initialValues={{ remember: true }}
			onFinish={onFinish}
		>
			<Form.Item
				label='Special use'
				name='specialUse'
				valuePropName='checked'
				tooltip='Should the response include only folders with specialUse flag set.'
			>
				<Switch />
			</Form.Item>
			<Form.Item>
				<Button type='primary' htmlType='submit'>
					Search
				</Button>
			</Form.Item>
		</Form>
	);
}

getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}

YesNoAdmin: React.FC<FieldAdminProps> = (props) => {
  const { t } = useTranslation()

  return (
    <div>
      <Form.Item
        label={t('type:yes_no:default')}
        name={[props.field.name as string, 'defaultValue']}
        labelCol={{ span: 6 }}
        valuePropName={'checked'}
      >
        <Switch />
      </Form.Item>
    </div>
  )
}

formItems: IFormSchema[] = [
  {
    name: 'nodeIds',
    label: 'nodeIds',
    rules: [{ required: true }],
    render: Input,
    renderProps: { disabled: true },
  },
  {
    name: 'resetSelection',
    label: 'resetSelection',
    rules: [{ required: true }],
    render: Switch,
    itemProps: {
      valuePropName: 'checked',
    },
  },
]

TYPES_TO_COMPONENT: any = {
  [PROPS_TYPES.object]: ObjectComponent,
  [PROPS_TYPES.objectArray]: ObjectArrayComponent,
  [PROPS_TYPES.string]: StringComponent,
  [PROPS_TYPES.function]: FunctionComponent,
  [PROPS_TYPES.numberArray]: NumberArray,
  [PROPS_TYPES.stringArray]: StringArray,
  [PROPS_TYPES.enum]: EnumComponent,
  [PROPS_TYPES.json]: JsonTextArea,
  [PROPS_TYPES.boolean]: Switch,
  [PROPS_TYPES.number]: InputNumber,
}

builder: FieldInputBuilderType = ({
  parseUrlValue,
  parseValue,
}) => function YesNoInput ({
  field,
  urlValue,
}) {
  const { t } = useTranslation()


  let initialValue: boolean = undefined

  if (field.defaultValue) {
    try {
      initialValue = parseValue(field.defaultValue)
    } catch (e) {
      logger('invalid default value %O', e)
    }
  }

  if (urlValue !== undefined) {
    initialValue = parseUrlValue(urlValue)
  }

  return (
    <div>
      <Form.Item
        name={[field.id]}
        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
        initialValue={initialValue}
        valuePropName={'checked'}
      >
        <Switch />
      </Form.Item>
    </div>
  )
}

function SplitTypeFormItem() {
  const onSplitChange = (checked: boolean) => {
    postVSCodeMessage({
      type: LookupViewMessageEnum.onValuesChange,
      data: { category: "split", type: "horizontal", checked },
      source: DMessageSource.webClient,
    });
  };
  return (
    <>
      <Form.Item
        name="horizontalSplit"
        label="Split Horizontally"
        valuePropName="checked"
        tooltip={MODIFIER_DESCRIPTIONS["horizontal"]}
      >
        <Switch onChange={onSplitChange} />
      </Form.Item>
    </>
  );
}

export default function DndPanelExample() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    // @ts-ignore
    LogicFlow.use(MiniMap);
    lf = new LogicFlow({
      ...config,
      grid: {
        size: 10,
        type: 'dot'
      },
      container: document.querySelector('#graph') as HTMLElement
    });
    lf.render(data);
  }, []);

  function handleSwitch() {
    if (show) {
      lf.extension.miniMap.hide();
      setShow(false);
    } else {
      lf.extension.miniMap.show();
      setShow(true);
    }
  }

  return (
    <>
      <ExampleHeader
        content="显示 mini-map"
        githubPath="/extension/components/mini-map/index.tsx"
      >
        <Switch onChange={handleSwitch} />
      </ExampleHeader>
      <div id="graph" className="viewport" />
    </>
  );
}

public render() {
    const { field, disabled, onChange } = this.props;
    return (
      <SwitchContainer spaceBetween className="m-t-xs b-t-grey">
        <Text fontSize="14px">
          {field.label}
          {field.required && ' *'}
        </Text>
        <Switch
          defaultChecked={field.default}
          className={field.value}
          disabled={disabled}
          onChange={(checked: any) => onChange(field.value, checked)}
        />
      </SwitchContainer>
    );
  }

Preview = observer(() => {
  const { templateStore } = useStores();
  const { isPreview, color, setPreview } = templateStore;
  const handlePreview = () => {
    const rsViewer = document.querySelector(".rs-view") as HTMLElement;
    if (!isPreview) {
      message.success('打开预览模式');
      htmlParser(rsViewer);
    } else {
      message.success('关闭预览模式');
      // 重新宣传的逻辑
      // templateStore.setHtml(setHtmlView(templateStore.color));
      rsViewer.innerHTML = setHtmlView(color);
      rsViewer.style.height = 'auto';
    }
    setPreview(!isPreview)
  }
  return (
    <Tooltip title="预览模式为最终pdf打印的样子">
      <div onClick={handlePreview} className="rs-preview">
        <span>{ isPreview ? "预览模式" : "编辑模式" }</span>
        <Switch size="small" checked={isPreview} onChange={() => {
          setPreview(!isPreview);
        }}/>
      </div>
    </Tooltip>
  )
})

export function GeneralSwitch(props: GeneralSwitchProps): React.ReactElement {
  const {
    value,
    size,
    onChange,
    disabled,
    checkedIcon,
    unCheckedIcon,
    checkedText,
    unCheckedText,
  } = props;

  return (
    <FormItemWrapper {...props} valuePropName="checked">
      <Switch
        checked={props.name && props.formElement ? undefined : value}
        size={size}
        onChange={onChange}
        disabled={disabled}
        data-testid="switch"
        checkedChildren={
          <>
            {checkedIcon && <GeneralIcon icon={checkedIcon} />}
            {checkedText}
          </>
        }
        unCheckedChildren={
          <>
            {unCheckedIcon && <GeneralIcon icon={unCheckedIcon} />}
            {unCheckedText}
          </>
        }
      />
    </FormItemWrapper>
  );
}

render (): React.ReactNode {
    const items = this.props.rois.map((roi, index) => (
      <AnnotationItem
        key={roi.uid}
        roi={roi}
        index={index}
        isVisible={this.props.visibleRoiUIDs.includes(roi.uid)}
        onVisibilityChange={this.props.onVisibilityChange}
      />
    ))

    return (
      <>
        <div style={{ paddingLeft: '14px', paddingTop: '7px', paddingBottom: '7px' }}>
          <Switch
            size='small'
            onChange={this.handleVisibilityChange}
            checked={this.props.visibleRoiUIDs.length > 0}
            checkedChildren={<FaEye />}
            unCheckedChildren={<FaEyeSlash />}
          />
        </div>
        <Menu
          selectedKeys={this.props.selectedRoiUIDs}
          onSelect={this.handleMenuItemSelection}
          onClick={this.handleMenuItemSelection}
        >
          {items}
        </Menu>
      </>
    )
  }

describe("SettingDropdown", () => {
  it("should work for bricks", async () => {
    const wrapper = mount(<SettingDropdown />);

    expect(wrapper.find(".settingContainer").length).toBe(0);
    wrapper.find("a").filter("[data-testid='setting-btn']").simulate("click");
    expect(wrapper.find(".settingContainer").length).toBe(1);
    const mockJsonStorageSetItem = mockJsonStorage.mock.instances[0].setItem;
    wrapper.find(Switch).invoke("onChange")(true);
    expect(mockJsonStorageSetItem).toBeCalledWith(
      localStorageKeyForShowRelatedNodesBasedOnEvents,
      true
    );
    expect(mockSetShowRelatedNodesBasedOnEvents).toBeCalled();
  });
});

LivePreference: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const {
    disableLiveTransactions,
    setDisableLiveTransactions,
  } = React.useContext(PreferencesContext);

  return (
    <Row>
      <Col xs={isDetailed ? 24 : 18}>
        <Text className={isDetailed ? "preference-detailed-title" : ""}>
          {t("preferences.liveTransactions")}
        </Text>
      </Col>
      {isDetailed ? (
        <Col xs={18}>
          <Text>
            {t("preferences.liveTransactionsDetailed")}
          </Text>
        </Col>
      ) : null}

      <Col xs={6} style={{ textAlign: "right" }}>
        <Switch
          checkedChildren={<CheckOutlined />}
          unCheckedChildren={<CloseOutlined />}
          onChange={(checked: boolean) => {
            setDisableLiveTransactions(!checked);
          }}
          checked={!disableLiveTransactions}
        />
      </Col>
    </Row>
  );
}

export function LegacyBrickSwitch({
  configProps,
  onChange,
  checked,
  switchMap
}: LegacyBrickSwitchProps): React.ReactElement {
  const checkValue: boolean = switchMap
    ? switchMap.truthy === checked
      ? true
      : false
    : !!checked;

  const handleOnChange = (checked: boolean, event: Event) => {
    const value = switchMap ? switchMap[checked ? "truthy" : "falsy"] : checked;
    onChange(value);
  };

  return (
    <Switch {...configProps} checked={checkValue} onChange={handleOnChange} />
  );
}

ThemePreference: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const { theme, setTheme } = React.useContext(PreferencesContext);

  return (
    <Row>
      <Col xs={isDetailed ? 24 : 18}>
        <Text className={isDetailed ? "preference-detailed-title" : ""}>
          {t("preferences.darkMode")}
        </Text>
      </Col>
      {isDetailed ? (
        <Col xs={18}>
          <Text>{t("preferences.darkModeDetailed")}</Text>
        </Col>
      ) : null}

      <Col xs={6} style={{ textAlign: "right" }}>
        <Switch
          checkedChildren={<CheckOutlined />}
          unCheckedChildren={<CloseOutlined />}
          onChange={(checked: boolean) => {
            setTheme(checked ? Theme.DARK : Theme.LIGHT);
          }}
          checked={theme === Theme.DARK}
        />
      </Col>
    </Row>
  );
}

OperationLog = ({
  recordID,
  onClose,
  StepList,
}: {
  recordID?: string;
  StepList?: any;
  onClose: () => void;
}) => {
  const [state, updater] = useUpdate({
    isStdErr: false,
  });

  const switchLog = (
    <Switch
      checkedChildren={i18n.t('Error')}
      unCheckedChildren={i18n.t('Standard')}
      checked={state.isStdErr}
      onChange={updater.isStdErr}
    />
  );
  const stream = state.isStdErr ? 'stderr' : 'stdout';
  return (
    <Drawer title={i18n.t('operation log')} visible={!!recordID} onClose={onClose} width="60%" destroyOnClose>
      {StepList}
      <LogRoller
        key={stream}
        query={{
          fetchApi: '/api/node-logs',
          recordID,
          stream,
        }}
        extraButton={switchLog}
        logKey={`cluster-op-${recordID}`}
      />
    </Drawer>
  );
}

BasicSwitch: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
  ({ ancestors, translate: t = title => title, data: row, onChange }) => {
    const { comType, options, ...rest } = row;

    const handleSwitchChange = value => {
      const newRow = updateByKey(row, 'value', value);
      onChange?.(ancestors, newRow);
    };

    return (
      <StyledBasicSwitch
        label={!options?.hideLabel ? t(row.label, true) : ''}
        labelCol={{ span: 20 }}
        wrapperCol={{ span: 4 }}
      >
        <Switch
          size="small"
          {...rest}
          {...options}
          checked={row.value}
          onChange={handleSwitchChange}
        />
      </StyledBasicSwitch>
    );
  },
  itemLayoutComparer,
)