antd/lib/button#ButtonProps TypeScript Examples

The following examples show how to use antd/lib/button#ButtonProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From next-basics with GNU General Public License v3.0 6 votes vote down vote up 
/**
   * @kind ButtonProps
   * @required -
   * @default -
   * @description 完全透传给 antd 的 Button 属性
   * @group advanced
   */
  @property({
    attribute: false,
  })
  buttonProps: ButtonProps & { icon?: string };
Example #2
Source File: index.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up 
/**
   * @kind `ButtonProps`
   * @required false
   * @default -
   * @description 确认按钮 props，详细属性参见 <https://3x.ant.design/components/button-cn/>
   * @group advanced
   */
  @property({ attribute: false }) okButtonProps: ButtonProps;
Example #3
Source File: index.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up 
/**
   * @kind `ButtonProps`
   * @required false
   * @default -
   * @description 取消按钮 props，详细属性参见 <https://3x.ant.design/components/button-cn/>
   * @group advanced
   */
  @property({ attribute: false }) cancelButtonProps: ButtonProps;
Example #4
Source File: index.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up 
private _configProps: ButtonProps & { icon?: string };
Example #5
Source File: index.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up 
/**
   * @kind ButtonProps
   * @required false
   * @default -
   * @description 确定按钮属性，同 ant design 的 Modal 的 [okButtonProps](https://ant.design/components/modal-cn/#API)
   * @group advanced
   */
  @property({ attribute: false }) okButtonProps?: ButtonProps;
Example #6
Source File: index.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up 
/**
   * @kind ButtonProps
   * @required false
   * @default -
   * @description 取消按钮属性，同 ant design 的 Modal 的 [cancelButtonProps](https://ant.design/components/modal-cn/#API)
   * @group advanced
   */
  @property({ attribute: false }) cancelButtonProps?: ButtonProps;
Example #7
Source File: registerButton.ts    From plasmic with MIT License 5 votes vote down vote up 
export function registerButton(
  loader?: Registerable,
  customButtonMeta?: ComponentMeta<ButtonProps>
) {
  const doRegisterComponent: typeof registerComponent = (...args) =>
    loader ? loader.registerComponent(...args) : registerComponent(...args);
  doRegisterComponent(Button, customButtonMeta ?? buttonMeta);
}
Example #8
Source File: registerButton.ts    From plasmic with MIT License 5 votes vote down vote up 
buttonMeta: ComponentMeta<ButtonProps> = {
  name: "AntdButton",
  displayName: "Antd Button",
  props: {
    type: {
      type: "choice",
      options: ["default", "primary", "ghost", "dashed", "link", "text"],
      description: "Can be set to primary, ghost, dashed, link, text, default",
      defaultValueHint: "default",
    },
    size: {
      type: "choice",
      options: ["small", "medium", "large"],
      description: "Set the size of button",
      defaultValueHint: "medium",
    },
    shape: {
      type: "choice",
      options: ["default", "circle", "round"],
      description: "Can be set button shape",
      defaultValueHint: "default",
    },
    disabled: {
      type: "boolean",
      description: "Disabled state of button",
      defaultValueHint: false,
    },
    ghost: {
      type: "boolean",
      description:
        "Make background transparent and invert text and border colors",
      defaultValueHint: false,
    },
    danger: {
      type: "boolean",
      description: "Set the danger status of button",
      defaultValueHint: false,
    },
    block: {
      type: "boolean",
      description: "Option to fit button width to its parent width",
      defaultValueHint: false,
    },
    loading: {
      type: "boolean",
      description: "Set the loading status of button",
      defaultValueHint: false,
    },
    href: {
      type: "string",
      description: "Redirect url of link button",
    },
    target: {
      type: "choice",
      options: ["_blank", "_self", "_parent", "_top"],
      description:
        "Same as target attribute of a, works when href is specified",
      hidden: props => !props.href,
      defaultValueHint: "_self",
    },
    children: {
      type: "slot",
      defaultValue: [
        {
          type: "text",
          value: "Button",
        },
      ],
    },
  },
  importPath: "antd/lib/button",
  isDefaultExport: true,
  importName: "Button",
}
Example #9
Source File: QueueListSharedComponents.tsx    From office-hours with GNU General Public License v3.0 5 votes vote down vote up 
QueueInfoColumnButton = (props: ButtonProps): ReactElement => (
  <QueueInfoColumnButtonStyle size="large" block {...props} />
)
Example #10
Source File: FormModal.tsx    From next-basics with GNU General Public License v3.0 4 votes vote down vote up 
export function FormModal(props: FormModalProps): React.ReactElement {
  const {
    form,
    items,
    dataSource,
    onOk,
    cancelButtonProps,
    okButtonProps,
    testId,
    ...modalProps
  } = props;
  const formBrick = useMemo((): UseSingleBrickConf => {
    const formBrick: UseSingleBrickConf = {
      ...defaultFormBrick,
    };
    const _formBrick = form?.useBrick || props.formBrick;
    const itemBricks = items?.useBrick || props.itemBricks;

    if (_formBrick) {
      Object.assign(formBrick, _formBrick);
      formBrick.properties = {
        ...defaultFormBrick.properties,
        ..._formBrick.properties,
      };
    }

    formBrick.slots = { items: { type: "bricks", bricks: itemBricks } };

    return formBrick;
  }, [form, props.formBrick, items, props.itemBricks]);
  const formElementRef = useRef<GeneralFormElement>();

  const refCallback = (element?: GeneralFormElement): void => {
    if (element) {
      if (!formElementRef.current) {
        // 因 ref 回调是在首次渲染之后调用，故需要手动调用 setInitValue 方法初始化表单数据
        Promise.resolve().then(() => {
          if (element.values) {
            element.setInitValue(element.values);
          }
        });
      }
    }

    formElementRef.current = element;
  };

  const handleOk = (e: React.MouseEvent<HTMLElement, MouseEvent>): void => {
    formElementRef.current.lowLevelValidate(() => {
      onOk?.(e);
    });
  };

  return (
    <Modal
      onOk={handleOk}
      cancelButtonProps={
        {
          type: "link",
          ...cancelButtonProps,
          "data-testid": "modal-button-cancel",
        } as ButtonProps
      }
      okButtonProps={
        {
          ...okButtonProps,
          "data-testid": "modal-button-ok",
        } as ButtonProps
      }
      modalRender={(node) =>
        React.cloneElement(node as React.ReactElement, {
          "data-testid": `${testId}-content`,
        })
      }
      {...modalProps}
    >
      <SingleBrickAsComponent
        useBrick={formBrick}
        data={dataSource}
        refCallback={(element) => {
          refCallback(element as GeneralFormElement);
        }}
      />
    </Modal>
  );
}