@react-awesome-query-builder/antd/modules/widgets/core/Switch.jsx

User-friendly query builder for React. AntDesign widgets

import React, { useCallback } from "react";
import { Switch , Button } from "antd";
import { LockFilled, UnlockOutlined } from "@ant-design/icons";

export default ({value, setValue, label, checkedLabel, hideLabel, id, config, type}) => {
  const {renderSize} = config.settings;
  const onSwitch = useCallback(switchValue => setValue(switchValue), [setValue]);
  const onClick = useCallback(() => setValue(!value), [setValue, value]);
  const postfix = type;
  const showLabel = hideLabel ? null : (value ? (checkedLabel || label) : label);

  if (type === "lock") {
    return <Button
      key={id+postfix}
      type={value ? "danger" : undefined}
      icon={value ? <LockFilled /> : <UnlockOutlined />}
      onClick={onClick}
      checked={!!value}
      size={renderSize}
    >{showLabel}</Button>;
  }

  return <Switch
    key={id+postfix}
    checkedChildren={checkedLabel || label}
    unCheckedChildren={value ? (checkedLabel || label) : label}
    onChange={onSwitch}
    checked={!!value}
    size={renderSize}
  ></Switch>;
};