@bizhermit/react-sdk
Version:
React SDK
1 lines • 3.56 kB
JavaScript
;var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFileBox=void 0;const react_1=__importStar(require("react")),value_1=__importDefault(require("../../hooks/value")),css_var_1=require("../../styles/css-var"),input_style_1=__importStar(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),input_1=require("../../utils/input"),button_1=__importStar(require("../button")),label_1=__importStar(require("../label")),resizer_1=__importDefault(require("../resizer")),cn="bh-flb",FileBox=react_1.default.forwardRef(((e,t)=>{const r=(0,react_1.useRef)(),a=(0,button_1.useButton)(),[l,n]=(0,react_1.useState)(""),{val:u,set:i,buf:c}=(0,value_1.default)(e,{effect:e=>{n(e?.name??""),r.current&&(r.current.value="")}});return(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>a.focus(),getValue:()=>c.current,setValue:e=>i.current(e)})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:t},react_1.default.createElement("div",{className:`${cn}-body`},e.$readOnly||e.$disabled?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(button_1.default,{...e.$butotnAttributes,$hook:a,$signal:e.$butotnAttributes?.$signal??e.$signal,$click:()=>{r.current.click()}},e.$butotnAttributes?.children??"ファイルを選択"),e.$hideLabel||null==u?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(label_1.default,{$nowrap:!0,$signal:e.$signal},l),e.children),e.$resize?react_1.default.createElement(resizer_1.default,{direction:"x"}):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("input",{ref:r,className:`${input_style_1.inputCn}-hidden`,type:"file",accept:e.$accept?.join(",")??".",tabIndex:-1,onChange:t=>{e.$disabled||e.$readOnly||i.current(t.target.files[0])}}),input_style_1.default,Style)})),useFileBox=()=>{const e=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{e.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>e.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((t=>{e.current.setValue?.(t)}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useFileBox=useFileBox;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn} {\n width: unset;\n}\n.${cn}-body {\n ${css_var_1.CssPV.flex}\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n flex: none;\n overflow: visible;\n height: 100%;\n width: 100%;\n}\n.${cn} > .${cn}-body > .${button_1.buttonCn} + .${label_1.labelCn} {\n padding-left: 3px;\n}\n.${cn} > .${cn}-body > .${label_1.labelCn} {\n flex: 1;\n}\n`));exports.default=FileBox;