UNPKG

@yamada-ui/transitions

Version:

Yamada UI transitions components

1 lines 5.31 kB
{"version":3,"sources":["../src/airy.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport {\n omitThemeProps,\n useComponentStyle,\n useCreateVars,\n} from \"@yamada-ui/core\"\nimport { motion, motionForwardRef, useMotionAnimation } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\n\nexport type AiryIdent = \"from\" | \"to\"\n\ninterface AiryOptions {\n /**\n * Passing React elements to \"from\" is required.\n */\n from: ReactElement\n /**\n * Passing React elements to \"to\" is required.\n */\n to: ReactElement\n /**\n * You can set the initial state.\n *\n * @default 'from'\n */\n defaultValue?: AiryIdent\n /**\n * The animation delay.\n *\n * @default 0\n */\n delay?: number\n /**\n * If `true`, the component is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The animation duration.\n *\n * @default 0.2\n */\n duration?: number\n /**\n * If `true`, the component is disabled.\n *\n * @default false\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the component is readonly.\n *\n * @default false\n * @deprecated Use `readOnly` instead.\n */\n isReadOnly?: boolean\n /**\n * If `true`, the component is readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * Use this when you want to control the animation from outside the component.\n */\n value?: AiryIdent\n /**\n * This is a callback function that is called when the animation state changes.\n */\n onChange?: (value: AiryIdent) => void\n}\n\nexport interface AiryProps\n extends Merge<MotionProps<\"button\">, AiryOptions>,\n ThemeProps<\"Airy\"> {}\n\n/**\n * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.\n *\n * @see Docs https://yamada-ui.com/components/transitions/airy\n */\nexport const Airy = motionForwardRef<AiryProps, \"button\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Airy\", props)\n const {\n className,\n defaultValue = \"from\",\n delay = 0,\n isDisabled,\n disabled = isDisabled,\n duration = 0.2,\n from,\n isReadOnly,\n readOnly = isReadOnly,\n to,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const [vars, { opacity }] = useCreateVars(\n { opacity: 1, ...styles, ...rest },\n [\"opacity\"],\n { transform: true },\n )\n const animate = useMotionAnimation()\n const [value, setValue] = useControllableState<AiryIdent>({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const css: CSSUIObject = {\n vars,\n ...styles,\n }\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({ opacity: 0, transition: { delay, duration } })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({ opacity, transition: { duration } })\n }, [animate, setValue, readOnly, opacity, duration, delay])\n\n return (\n <motion.button\n ref={ref}\n type=\"button\"\n className={cx(\"ui-airy\", `ui-airy--${value}`, className)}\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n disabled={disabled}\n initial={{ opacity }}\n onClick={onClick}\n __css={css}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n})\n\nAiry.displayName = \"Airy\"\nAiry.__ui__ = \"Airy\"\n"],"mappings":";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,kBAAkB,0BAA0B;AAC7D,SAAS,4BAA4B;AACrC,SAAS,IAAI,gBAAgB;AAC7B,SAAS,mBAAmB;AAwHxB;AA5CG,IAAM,OAAO,iBAAsC,CAAC,OAAO,QAAQ;AACxE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;AAAA,IAC1B,EAAE,SAAS,GAAG,GAAG,QAAQ,GAAG,KAAK;AAAA,IACjC,CAAC,SAAS;AAAA,IACV,EAAE,WAAW,KAAK;AAAA,EACpB;AACA,QAAM,UAAU,mBAAmB;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAgC;AAAA,IACxD;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,MAAmB;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EACL;AAEA,QAAM,UAAU,YAAY,YAAY;AACtC,QAAI,SAAU;AAEd,UAAM,QAAQ,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,OAAO,SAAS,EAAE,CAAC;AAEnE,aAAS,CAAC,SAAU,SAAS,SAAS,OAAO,MAAO;AAEpD,UAAM,QAAQ,MAAM,EAAE,SAAS,YAAY,EAAE,SAAS,EAAE,CAAC;AAAA,EAC3D,GAAG,CAAC,SAAS,UAAU,UAAU,SAAS,UAAU,KAAK,CAAC;AAE1D,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,GAAG,WAAW,YAAY,KAAK,IAAI,SAAS;AAAA,MACvD,iBAAe,SAAS,QAAQ;AAAA,MAChC,iBAAe,SAAS,QAAQ;AAAA,MAChC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,EAAE,QAAQ;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,oBAAU,SAAS,OAAO;AAAA;AAAA,EAC7B;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":[]}