muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed features at editor

Browse source
This commit is contained in:
muerwre 2019-08-01 19:11:01 +07:00
parent 85ee879c2f
commit 393813ce4e
9 changed files with 204 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/input/Button/index.tsx
View file

@ -1,25 +1,29 @@
import classnames from 'classnames';
import * as styles from './styles.scss';
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
import { Icon } from '~/components/input/Icon';
import classnames from "classnames";
import * as styles from "./styles.scss";
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
import { Icon } from "~/components/input/Icon";
import { IIcon } from "~/redux/types";
type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
type IButtonProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
size?: "mini" | "normal" | "big" | "giant" | "micro";
iconLeft?: IIcon;
iconRight?: IIcon;
seamless?: boolean;
transparent?: boolean;
title?: string;
red?: boolean,
grey?: boolean,
red?: boolean;
grey?: boolean;
non_submitting?: boolean;
is_loading?: boolean;
stretchy?: boolean;
};
export const Button: FC<IButtonProps> = ({
className = '',
size = 'normal',
className = "",
size = "normal",
iconLeft,
iconRight,
children,
@ -30,34 +34,28 @@ export const Button: FC<IButtonProps> = ({
grey = false,
is_loading,
title,
stretchy,
...props
}) => (
React.createElement(
(seamless || non_submitting) ? 'div' : 'button',
{
className: classnames(
styles.button,
className,
styles[size],
{
red,
grey,
seamless,
transparent,
disabled: props.disabled,
icon: (iconLeft || iconRight) && !title && !children,
is_loading,
}),
children: [
iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
(
title
? <span key={1}>{title}</span>
: (children && <span key={1}>{children}</span>) || null
),
iconRight && <Icon icon={iconRight} size={20} key={2} />,
],
...props,
},
)
);
}) =>
React.createElement(seamless || non_submitting ? "div" : "button", {
className: classnames(styles.button, className, styles[size], {
red,
grey,
seamless,
transparent,
disabled: props.disabled,
icon: (iconLeft || iconRight) && !title && !children,
is_loading,
stretchy
}),
children: [
iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
title ? (
<span key={1}>{title}</span>
) : (
(children && <span key={1}>{children}</span>) || null
),
iconRight && <Icon icon={iconRight} size={20} key={2} />
],
...props
});