@colisweb/rescript-toolkit 2.17.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",
@@ -86,6 +86,7 @@
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-intl": "5.24.7",
     "react-is": "17.0.2",
     "sass": "1.45.0"
   }

package/src/form/Toolkit__Form.res

@@ -100,9 +100,13 @@ module Make = (StateLenses: Config) => {
       ~inputRightAddon=?,
       ~errorClassName=?,
       ~optionalMessage: option<React.element>=?,
-    ) =>
+    ) => {
+      let (showPassword, setShowPassword) = React.useState(() => false)
+      let isPasswordType = type_->Option.mapWithDefault(false, type_ => type_ === "password")
+
       <Form.Field
         field
+        key={showPassword->string_of_bool}
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
 
@@ -137,12 +141,14 @@ module Make = (StateLenses: Config) => {
                 <Toolkit__Ui.TextInput
                   className={cx([
                     inputClassName,
-                    inputRightAddon->Option.isSome ? "rounded-r-none" : "",
+                    inputRightAddon->Option.isSome || isPasswordType ? "rounded-r-none" : "",
                   ])}
                   id
                   value
                   ?name
-                  ?type_
+                  type_=?{type_->Option.map(type_ =>
+                    type_ === "password" && showPassword ? "text" : type_
+                  )}
                   ?disabled
                   ?placeholder
                   ?autoFocus
@@ -153,6 +159,25 @@ module Make = (StateLenses: Config) => {
                   onChange
                   onBlur
                 />
+                {type_->Option.mapWithDefault(React.null, type_ => {
+                  switch type_ {
+                  | "password" =>
+                    <Toolkit__Ui_Tooltip
+                      label={showPassword
+                        ? <ReactIntl.FormattedMessage defaultMessage="Hide password" />
+                        : <ReactIntl.FormattedMessage defaultMessage="Show password" />}>
+                      <button
+                        type_="button"
+                        className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"
+                        onClick={_ => setShowPassword(v => !v)}>
+                        {showPassword
+                          ? <BsReactIcons.AiFillEyeInvisible size={26} />
+                          : <BsReactIcons.AiFillEye size={26} />}
+                      </button>
+                    </Toolkit__Ui_Tooltip>
+                  | _ => React.null
+                  }
+                })}
                 {inputRightAddon->Option.getWithDefault(React.null)}
               </div>
             </div>
@@ -160,5 +185,6 @@ module Make = (StateLenses: Config) => {
           </>
         }}
       />
+    }
   }
 }

package/src/vendors/BsReactIcons.res

@@ -5899,3 +5899,12 @@ module IoIosCloseCircle = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "IoIosCloseCircle"
 }
+
+module AiFillEyeInvisible = {
+  @module("react-icons/ai") @react.component
+  external make: (~size: int=?) => React.element = "AiFillEyeInvisible"
+}
+module AiFillEye = {
+  @module("react-icons/ai") @react.component
+  external make: (~size: int=?) => React.element = "AiFillEye"
+}