mirror of
https://github.com/urbit/shrub.git
synced 2024-11-28 22:33:06 +03:00
profile: fix form breakage caused by 1.2 migration
This commit is contained in:
Liam Fitzgerald
parent
30ee75413d
commit
1f95c40a24
255
pkg/interface/package-lock.json
generated
255
pkg/interface/package-lock.json
generated
@ -1709,11 +1709,11 @@
|
||||
"integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
|
||||
},
|
||||
"@tlon/indigo-react": {
|
||||
"version": "github:liam-fitzgerald/indigo-react#36fe20029c6005b39581b05c2987cd7c6d606056",
|
||||
"from": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.5.tgz",
|
||||
"integrity": "sha512-NOQTwH74l/XXMIfQ4ZzymvZuk1WK1nmO552TmXrQxBUSb7HmdlA8anG5oRrvnLJTkajLCY59McLkDca+lCcvwg==",
|
||||
"requires": {
|
||||
"@reach/menu-button": "^0.10.5",
|
||||
"formik": "^2.1.5",
|
||||
"react": "^16.13.1",
|
||||
"tslib": "^2.0.1"
|
||||
},
|
||||
@ -1806,58 +1806,12 @@
|
||||
"integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/orderedmap": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/orderedmap/-/orderedmap-1.0.0.tgz",
|
||||
"integrity": "sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/prosemirror-model": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/prosemirror-model/-/prosemirror-model-1.7.2.tgz",
|
||||
"integrity": "sha512-2l+yXvidg3AUHN07mO4Jd8Q84fo6ksFsy7LHUurLYrZ74uTahBp2fzcO49AKZMzww2EulXJ40Kl/OFaQ/7A1fw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/orderedmap": "*"
|
||||
}
|
||||
},
|
||||
"@types/prosemirror-state": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.5.tgz",
|
||||
"integrity": "sha512-a5DxAifiF6vmdSJ5jsDMkpykUgUJUy+T5Q5hCjFOKJ4cfd3m3q1lsFKr7Bc4r91Qb7rfqyiKCMDnASS8LIHrKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prosemirror-model": "*",
|
||||
"@types/prosemirror-transform": "*",
|
||||
"@types/prosemirror-view": "*"
|
||||
}
|
||||
},
|
||||
"@types/prosemirror-transform": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/prosemirror-transform/-/prosemirror-transform-1.1.1.tgz",
|
||||
"integrity": "sha512-yYCYSoiRH+Wcbl8GJc0PFCzeyMzNQ1vL2xrHHSXZuNcIlH75VoiKrZFeZ6BS9cl8mYXjZrlmdBe8YOxYvyKM6A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prosemirror-model": "*"
|
||||
}
|
||||
},
|
||||
"@types/prosemirror-view": {
|
||||
"version": "1.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/prosemirror-view/-/prosemirror-view-1.15.1.tgz",
|
||||
"integrity": "sha512-ZdgIqDLWiO4wW4DhK8OjEVam3/DhBcggQeZ6zLts+UCflAZPnEk5dzRqFBVEyrvWqSAGLuPAoOgGAPjj/XwR8w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prosemirror-model": "*",
|
||||
"@types/prosemirror-state": "*",
|
||||
"@types/prosemirror-transform": "*"
|
||||
}
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.38.tgz",
|
||||
@ -2367,6 +2321,7 @@
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
@ -3610,11 +3565,6 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"crelt": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.4.tgz",
|
||||
"integrity": "sha512-l1cwMUOssGLEj5zgbut4lxJq95ZabOXVZnDybNqQRUtXh1lvUK7e7kJNm8SfvTQzYpE3AVJhIVUJKf382lMA7A=="
|
||||
},
|
||||
"cross-env": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
|
||||
@ -6270,14 +6220,6 @@
|
||||
"type-check": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
|
||||
"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
|
||||
"requires": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"loader-runner": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
|
||||
@ -6408,18 +6350,6 @@
|
||||
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
|
||||
"integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
|
||||
"integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
"entities": "~2.0.0",
|
||||
"linkify-it": "^2.0.0",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"markdown-to-jsx": {
|
||||
"version": "6.11.4",
|
||||
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
|
||||
@ -6448,11 +6378,6 @@
|
||||
"unist-util-visit-parents": "1.1.2"
|
||||
}
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@ -7223,11 +7148,6 @@
|
||||
"word-wrap": "~1.2.3"
|
||||
}
|
||||
},
|
||||
"orderedmap": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
|
||||
"integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
|
||||
},
|
||||
"original": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
|
||||
@ -7744,150 +7664,6 @@
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.3.tgz",
|
||||
"integrity": "sha512-TEMKBo6s4gZUKmNYwaMkS2JdDxdWgUijW/U/jLAOHVyLZfU1KHXv+mC1J9gkfGOr8532XHqMJytko1lSjc0kmw=="
|
||||
},
|
||||
"prosemirror": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror/-/prosemirror-0.11.1.tgz",
|
||||
"integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw=="
|
||||
},
|
||||
"prosemirror-commands": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
|
||||
"integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
|
||||
"requires": {
|
||||
"prosemirror-model": "^1.0.0",
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"prosemirror-transform": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-dropcursor": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
|
||||
"integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
|
||||
"requires": {
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"prosemirror-transform": "^1.1.0",
|
||||
"prosemirror-view": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-example-setup": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.1.2.tgz",
|
||||
"integrity": "sha512-MTpIMyqk08jFnzxeRMCinCEMtVSTUtxKgQBGxfCbVe9C6zIOqp9qZZJz5Ojaad1GETySyuj8+OIHHvQsIaaaGQ==",
|
||||
"requires": {
|
||||
"prosemirror-commands": "^1.0.0",
|
||||
"prosemirror-dropcursor": "^1.0.0",
|
||||
"prosemirror-gapcursor": "^1.0.0",
|
||||
"prosemirror-history": "^1.0.0",
|
||||
"prosemirror-inputrules": "^1.0.0",
|
||||
"prosemirror-keymap": "^1.0.0",
|
||||
"prosemirror-menu": "^1.0.0",
|
||||
"prosemirror-schema-list": "^1.0.0",
|
||||
"prosemirror-state": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-gapcursor": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
|
||||
"integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
|
||||
"requires": {
|
||||
"prosemirror-keymap": "^1.0.0",
|
||||
"prosemirror-model": "^1.0.0",
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"prosemirror-view": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-history": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
|
||||
"integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
|
||||
"requires": {
|
||||
"prosemirror-state": "^1.2.2",
|
||||
"prosemirror-transform": "^1.0.0",
|
||||
"rope-sequence": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-inputrules": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
|
||||
"integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
|
||||
"requires": {
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"prosemirror-transform": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-keymap": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
|
||||
"integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
|
||||
"requires": {
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"w3c-keyname": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-markdown": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.0.tgz",
|
||||
"integrity": "sha512-ugTyZfTu1l2E3EI6+DwD917mz2Sk5E4R01Nh67yMffGg4S9ZetC81g1VIKGCaak4jnoP4BMUIOUJyXAS6xFLaA==",
|
||||
"requires": {
|
||||
"markdown-it": "^10.0.0",
|
||||
"prosemirror-model": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-menu": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.1.4.tgz",
|
||||
"integrity": "sha512-2ROsji/X9ciDnVSRvSTqFygI34GEdHfQSsK4zBKjPxSEroeiHHcdRMS1ofNIf2zM0Vpp5/YqfpxynElymQkqzg==",
|
||||
"requires": {
|
||||
"crelt": "^1.0.0",
|
||||
"prosemirror-commands": "^1.0.0",
|
||||
"prosemirror-history": "^1.0.0",
|
||||
"prosemirror-state": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-model": {
|
||||
"version": "1.11.2",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.11.2.tgz",
|
||||
"integrity": "sha512-+gM+x1VUfGAyKR/g0bK7FC46fVNq0xVVL859QAQ7my2p5HzKrPps/pSbYn7T50XTG2r2IhZJChsUFUBHtcoN0Q==",
|
||||
"requires": {
|
||||
"orderedmap": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-schema-list": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz",
|
||||
"integrity": "sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==",
|
||||
"requires": {
|
||||
"prosemirror-model": "^1.0.0",
|
||||
"prosemirror-transform": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-state": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
|
||||
"integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
|
||||
"requires": {
|
||||
"prosemirror-model": "^1.0.0",
|
||||
"prosemirror-transform": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-transform": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.8.tgz",
|
||||
"integrity": "sha512-hKqceqv9ZmMQXNQkhFjr0KFGPvkhygaWND+uIM0GxRpALrKfxP97SsgHTBs3OpJhDmh5N+mB4D/CksB291Eavg==",
|
||||
"requires": {
|
||||
"prosemirror-model": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"prosemirror-view": {
|
||||
"version": "1.15.7",
|
||||
"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.15.7.tgz",
|
||||
"integrity": "sha512-fSSXphXg+82qb4xNsHT0mX6ro0Wu1/l+WIFO5jYfyjd42r6ZWSg0gFItLgqOVPxoKQOlrPJUhrozTxiqx0EXOg==",
|
||||
"requires": {
|
||||
"prosemirror-model": "^1.1.0",
|
||||
"prosemirror-state": "^1.0.0",
|
||||
"prosemirror-transform": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
|
||||
@ -8629,11 +8405,6 @@
|
||||
"inherits": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"rope-sequence": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
|
||||
"integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
|
||||
},
|
||||
"run-async": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
||||
@ -9239,7 +9010,8 @@
|
||||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||
"dev": true
|
||||
},
|
||||
"ssri": {
|
||||
"version": "6.0.1",
|
||||
@ -9932,11 +9704,6 @@
|
||||
"integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
|
||||
"dev": true
|
||||
},
|
||||
"uc.micro": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
|
||||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
|
||||
},
|
||||
"unherit": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
|
||||
@ -10158,11 +9925,6 @@
|
||||
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
|
||||
"dev": true
|
||||
},
|
||||
"use-prosemirror": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-prosemirror/-/use-prosemirror-1.2.0.tgz",
|
||||
"integrity": "sha512-qRq5xNdgNQKBFBOKlhGmpKd0yJoktmkiUPkD+SmS+BX9are1S/Emg4qf8vk/Npk32ECIgKxmbicd4xUzQFhNoQ=="
|
||||
},
|
||||
"util": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
|
||||
@ -10261,11 +10023,6 @@
|
||||
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"w3c-keyname": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
|
||||
"integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import React, { Component } from "react";
|
||||
import React from "react";
|
||||
import { Sigil } from "~/logic/lib/sigil";
|
||||
import * as Yup from "yup";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import { EditElement } from "./edit-element";
|
||||
import { Spinner } from "~/views/components/Spinner";
|
||||
import { uxToHex } from "~/logic/lib/util";
|
||||
import { Col, ManagedTextInputField as Input, Box, Text, Row } from "@tlon/indigo-react";
|
||||
import { Formik, Form, FormikHelpers } from "formik";
|
||||
import {
|
||||
ManagedForm as Form,
|
||||
Col,
|
||||
ManagedTextInputField as Input,
|
||||
Box,
|
||||
Text,
|
||||
Row,
|
||||
} from "@tlon/indigo-react";
|
||||
import { Formik, FormikHelpers } from "formik";
|
||||
import { Contact } from "~/types/contact-update";
|
||||
import { AsyncButton } from "~/views/components/AsyncButton";
|
||||
import { ColorInput } from "~/views/components/ColorInput";
|
||||
@ -93,30 +97,34 @@ export function ContactCard(props: ContactCardProps) {
|
||||
initialValues={contact}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Form>
|
||||
<Col>
|
||||
<Row
|
||||
borderBottom={1}
|
||||
borderBottomColor="washedGray"
|
||||
pb={3}
|
||||
alignItems="center"
|
||||
>
|
||||
<Sigil size={32} classes="" color={hexColor} ship={us} />
|
||||
<Box ml={2}>
|
||||
<Text fontFamily="mono">{us}</Text>
|
||||
</Box>
|
||||
</Row>
|
||||
<ImageInput mt={3} id="avatar" label="Avatar" s3={props.s3} />
|
||||
<ColorInput id="color" label="Sigil Color" />
|
||||
<Input id="nickname" label="Nickname" />
|
||||
<Input id="email" label="Email" />
|
||||
<Input id="phone" label="Phone" />
|
||||
<Input id="website" label="Website" />
|
||||
<Input id="notes" label="Notes" />
|
||||
<AsyncButton primary loadingText="Updating..." border>
|
||||
Save
|
||||
</AsyncButton>
|
||||
</Col>
|
||||
<Form
|
||||
display="grid"
|
||||
gridAutoRows="auto"
|
||||
gridTemplateColumns="100%"
|
||||
gridRowGap="5"
|
||||
maxWidth="400px"
|
||||
>
|
||||
<Row
|
||||
borderBottom={1}
|
||||
borderBottomColor="washedGray"
|
||||
pb={3}
|
||||
alignItems="center"
|
||||
>
|
||||
<Sigil size={32} classes="" color={hexColor} ship={us} />
|
||||
<Box ml={2}>
|
||||
<Text fontFamily="mono">{us}</Text>
|
||||
</Box>
|
||||
</Row>
|
||||
<ImageInput id="avatar" label="Avatar" s3={props.s3} />
|
||||
<ColorInput id="color" label="Sigil Color" />
|
||||
<Input id="nickname" label="Nickname" />
|
||||
<Input id="email" label="Email" />
|
||||
<Input id="phone" label="Phone" />
|
||||
<Input id="website" label="Website" />
|
||||
<Input id="notes" label="Notes" />
|
||||
<AsyncButton primary loadingText="Updating..." border>
|
||||
Save
|
||||
</AsyncButton>
|
||||
</Form>
|
||||
</Formik>
|
||||
</Box>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Row,
|
||||
Label,
|
||||
Col,
|
||||
ManagedRadioButtonField as Radio,
|
||||
ManagedTextInputField as Input,
|
||||
} from "@tlon/indigo-react";
|
||||
@ -23,34 +25,32 @@ export function BackgroundPicker({
|
||||
api: GlobalApi;
|
||||
s3: S3State;
|
||||
}) {
|
||||
|
||||
const rowSpace = { my: 0, alignItems: 'center' };
|
||||
const radioProps = { my: 4, mr: 4, name: 'bgType' };
|
||||
return (
|
||||
<Box>
|
||||
<Label>Landscape Background</Label>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box mt={3} mr={7}>
|
||||
<Radio label="Image" id="url" name="bgType" />
|
||||
{bgType === "url" && (
|
||||
<ImageInput
|
||||
api={api}
|
||||
s3={s3}
|
||||
id="bgUrl"
|
||||
name="bgUrl"
|
||||
label="URL"
|
||||
url={bgUrl || ""}
|
||||
/>
|
||||
)}
|
||||
<Radio label="Color" id="color" name="bgType" />
|
||||
{bgType === "color" && (
|
||||
<Input
|
||||
ml={4}
|
||||
type="text"
|
||||
label="Color"
|
||||
id="bgColor"
|
||||
/>
|
||||
)}
|
||||
<Radio label="None" id="none" name="bgType" />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Col>
|
||||
<Label mb="2">Landscape Background</Label>
|
||||
<Row {...rowSpace}>
|
||||
<Radio {...radioProps} label="Image" id="url" />
|
||||
{bgType === "url" && (
|
||||
<ImageInput
|
||||
api={api}
|
||||
s3={s3}
|
||||
id="bgUrl"
|
||||
name="bgUrl"
|
||||
label="URL"
|
||||
url={bgUrl || ""}
|
||||
/>
|
||||
)}
|
||||
</Row>
|
||||
<Row {...rowSpace}>
|
||||
<Radio label="Color" id="color" {...radioProps} />
|
||||
{bgType === "color" && (
|
||||
<Input ml={4} type="text" label="Color" id="bgColor" />
|
||||
)}
|
||||
</Row>
|
||||
<Radio label="None" id="none" {...radioProps} />
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { useCallback } from "react";
|
||||
|
||||
import {
|
||||
ManagedTextInputField as Input,
|
||||
ManagedForm as Form,
|
||||
Box,
|
||||
Button,
|
||||
Col,
|
||||
@ -11,7 +12,7 @@ import {
|
||||
MenuList,
|
||||
MenuItem,
|
||||
} from "@tlon/indigo-react";
|
||||
import { Formik, Form } from "formik";
|
||||
import { Formik } from "formik";
|
||||
|
||||
import GlobalApi from "~/logic/api/global";
|
||||
|
||||
@ -53,49 +54,48 @@ export function BucketList({
|
||||
|
||||
return (
|
||||
<Formik initialValues={{ newBucket: "" }} onSubmit={onSubmit}>
|
||||
<Form>
|
||||
<Col alignItems="start">
|
||||
{_buckets.map((bucket) => (
|
||||
<Box
|
||||
key={bucket}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
borderRadius={1}
|
||||
border={1}
|
||||
borderColor="washedGray"
|
||||
fontSize={1}
|
||||
pl={2}
|
||||
mb={2}
|
||||
width="100%"
|
||||
>
|
||||
<Text>{bucket}</Text>
|
||||
{bucket === selected && (
|
||||
<Text p={1} color="green">
|
||||
Active
|
||||
</Text>
|
||||
)}
|
||||
{bucket !== selected && (
|
||||
<Menu>
|
||||
<MenuButton sm>Options</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem onSelect={onSelect(bucket)}>Make Active</MenuItem>
|
||||
<MenuItem onSelect={onDelete(bucket)}>Delete</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
<Input
|
||||
mt={2}
|
||||
type="text"
|
||||
label="New Bucket"
|
||||
id="newBucket"
|
||||
/>
|
||||
<Button border borderColor="washedGrey" type="submit">
|
||||
Add
|
||||
</Button>
|
||||
</Col>
|
||||
<Form
|
||||
display="grid"
|
||||
gridTemplateColumns="100%"
|
||||
gridAutoRows="auto"
|
||||
gridRowGap={2}
|
||||
>
|
||||
{_buckets.map((bucket) => (
|
||||
<Box
|
||||
key={bucket}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
borderRadius={1}
|
||||
border={1}
|
||||
borderColor="washedGray"
|
||||
fontSize={1}
|
||||
pl={2}
|
||||
mb={2}
|
||||
>
|
||||
<Text>{bucket}</Text>
|
||||
{bucket === selected && (
|
||||
<Text p={2} color="green">
|
||||
Active
|
||||
</Text>
|
||||
)}
|
||||
{bucket !== selected && (
|
||||
<Menu>
|
||||
<MenuButton border={0} cursor="pointer" width="auto">
|
||||
Options
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem onSelect={onSelect(bucket)}>Make Active</MenuItem>
|
||||
<MenuItem onSelect={onDelete(bucket)}>Delete</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
<Input mt="2" label="New Bucket" id="newBucket" />
|
||||
<Button mt="2" borderColor="washedGrey" type="submit">
|
||||
Add
|
||||
</Button>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
|
||||
@ -14,7 +14,7 @@ import GlobalApi from "../../../../api/global";
|
||||
import { LaunchState } from "../../../../types/launch-update";
|
||||
import { DropLaunchTiles } from "./DropLaunch";
|
||||
import { S3State, BackgroundConfig } from "../../../../types";
|
||||
import { BackgroundPicker, BgType } from './BackgroundPicker';
|
||||
import { BackgroundPicker, BgType } from "./BackgroundPicker";
|
||||
|
||||
const formSchema = Yup.object().shape({
|
||||
tileOrdering: Yup.array().of(Yup.string()),
|
||||
@ -47,14 +47,7 @@ interface DisplayFormProps {
|
||||
}
|
||||
|
||||
export default function DisplayForm(props: DisplayFormProps) {
|
||||
const {
|
||||
api,
|
||||
launch,
|
||||
background,
|
||||
hideAvatars,
|
||||
hideNicknames,
|
||||
s3
|
||||
} = props;
|
||||
const { api, launch, background, hideAvatars, hideNicknames, s3 } = props;
|
||||
|
||||
let bgColor, bgUrl;
|
||||
if (background?.type === "url") {
|
||||
@ -99,9 +92,9 @@ export default function DisplayForm(props: DisplayFormProps) {
|
||||
<Form>
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns="1fr"
|
||||
gridTemplateColumns="100%"
|
||||
gridTemplateRows="auto"
|
||||
gridRowGap={3}
|
||||
gridRowGap={5}
|
||||
>
|
||||
<Box color="black" fontSize={1} mb={3} fontWeight={900}>
|
||||
Display Preferences
|
||||
@ -123,22 +116,20 @@ export default function DisplayForm(props: DisplayFormProps) {
|
||||
api={api}
|
||||
s3={s3}
|
||||
/>
|
||||
<Box>
|
||||
<Checkbox
|
||||
label="Disable avatars"
|
||||
id="avatars"
|
||||
caption="Do not show user-set avatars"
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disable nicknames"
|
||||
id="nicknames"
|
||||
caption="Do not show user-set nicknames"
|
||||
/>
|
||||
</Box>
|
||||
<Checkbox
|
||||
label="Disable avatars"
|
||||
id="avatars"
|
||||
caption="Do not show user-set avatars"
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disable nicknames"
|
||||
id="nicknames"
|
||||
caption="Do not show user-set nicknames"
|
||||
/>
|
||||
<Button border={1} borderColor="washedGray" type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
<Button border={1} borderColor="washedGray" type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
@ -83,7 +83,7 @@ function DragTileBasic(props: {
|
||||
}
|
||||
style={props.style}
|
||||
>
|
||||
<Img width="48px" height="48px" src={tile.iconUrl} invert={isDojo} />
|
||||
<Image width="48px" height="48px" src={tile.iconUrl} invert={isDojo} />
|
||||
<Text
|
||||
color={
|
||||
"black" // isDojo ? "white" : "black"
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import React from "react";
|
||||
import { Box, Button, Checkbox } from '@tlon/indigo-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ManagedCheckboxField as Checkbox,
|
||||
} from "@tlon/indigo-react";
|
||||
import { Formik, Form } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
@ -10,7 +14,7 @@ const formSchema = Yup.object().shape({
|
||||
imageShown: Yup.boolean(),
|
||||
audioShown: Yup.boolean(),
|
||||
videoShown: Yup.boolean(),
|
||||
oembedShown: Yup.boolean()
|
||||
oembedShown: Yup.boolean(),
|
||||
});
|
||||
|
||||
interface FormSchema {
|
||||
@ -39,7 +43,7 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
|
||||
imageShown,
|
||||
audioShown,
|
||||
videoShown,
|
||||
oembedShown
|
||||
oembedShown,
|
||||
} as FormSchema
|
||||
}
|
||||
onSubmit={(values, actions) => {
|
||||
@ -47,7 +51,7 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
|
||||
imageShown: values.imageShown,
|
||||
audioShown: values.audioShown,
|
||||
videoShown: values.videoShown,
|
||||
oembedShown: values.oembedShown
|
||||
oembedShown: values.oembedShown,
|
||||
});
|
||||
api.local.dehydrate();
|
||||
actions.setSubmitting(false);
|
||||
@ -59,36 +63,26 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
|
||||
display="grid"
|
||||
gridTemplateColumns="1fr"
|
||||
gridTemplateRows="audio"
|
||||
gridRowGap={3}
|
||||
gridRowGap={5}
|
||||
>
|
||||
<Box color="black" fontSize={1} mb={3} fontWeight={900}>
|
||||
<Box color="black" fontSize={1} fontWeight={900}>
|
||||
Remote Content
|
||||
</Box>
|
||||
<Box>
|
||||
<Checkbox
|
||||
label="Load images"
|
||||
id="imageShown"
|
||||
/>
|
||||
<Checkbox
|
||||
label="Load audio files"
|
||||
id="audioShown"
|
||||
/>
|
||||
<Checkbox
|
||||
label="Load video files"
|
||||
id="videoShown"
|
||||
/>
|
||||
<Checkbox
|
||||
label="Load embedded content"
|
||||
id="oembedShown"
|
||||
caption="Embedded content may contain scripts"
|
||||
/>
|
||||
</Box>
|
||||
<Checkbox label="Load images" id="imageShown" />
|
||||
<Checkbox label="Load audio files" id="audioShown" />
|
||||
<Checkbox label="Load video files" id="videoShown" />
|
||||
<Checkbox
|
||||
label="Load embedded content"
|
||||
id="oembedShown"
|
||||
caption="Embedded content may contain scripts"
|
||||
/>
|
||||
<Button border={1} borderColor="washedGray" type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
<Button border={1} borderColor="washedGray" type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,16 +2,17 @@ import React, { useCallback } from "react";
|
||||
|
||||
import {
|
||||
ManagedTextInputField as Input,
|
||||
ManagedForm as Form,
|
||||
Box,
|
||||
Button,
|
||||
Col,
|
||||
Text,
|
||||
Menu
|
||||
Menu,
|
||||
} from "@tlon/indigo-react";
|
||||
|
||||
import { Formik, Form } from "formik";
|
||||
import { Formik } from "formik";
|
||||
import GlobalApi from "../../../../api/global";
|
||||
import { BucketList } from './BucketList';
|
||||
import { BucketList } from "./BucketList";
|
||||
import { S3State } from "../../../../types";
|
||||
|
||||
interface FormSchema {
|
||||
@ -49,9 +50,6 @@ export default function S3Form(props: S3FormProps) {
|
||||
return (
|
||||
<>
|
||||
<Col>
|
||||
<Box color="black" mb={4} fontSize={1} fontWeight={900}>
|
||||
S3 Credentials
|
||||
</Box>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
@ -64,23 +62,23 @@ export default function S3Form(props: S3FormProps) {
|
||||
}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Form>
|
||||
<Input width="256px" type="text" label="Endpoint" id="s3endpoint" />
|
||||
<Form
|
||||
display="grid"
|
||||
gridTemplateColumns="100%"
|
||||
gridAutoRows="auto"
|
||||
gridRowGap={5}
|
||||
>
|
||||
<Box color="black" fontSize={1} fontWeight={900}>
|
||||
S3 Credentials
|
||||
</Box>
|
||||
<Input label="Endpoint" id="s3endpoint" />
|
||||
<Input label="Access Key ID" id="s3accessKeyId" />
|
||||
<Input
|
||||
width="256px"
|
||||
type="text"
|
||||
label="Access Key ID"
|
||||
id="s3accessKeyId"
|
||||
/>
|
||||
<Input
|
||||
width="256px"
|
||||
type="password"
|
||||
label="Secret Access Key"
|
||||
id="s3secretAccessKey"
|
||||
/>
|
||||
<Button border={1} type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
</Formik>
|
||||
</Col>
|
||||
|
||||
@ -22,7 +22,7 @@ const SidebarItem = ({ children, view, current }) => {
|
||||
px={3}
|
||||
backgroundColor={selected ? "washedBlue" : "white"}
|
||||
>
|
||||
<Icon mr={2} display="inline-block" icon="Circle" fill={color} />
|
||||
<Icon mr={2} display="inline-block" icon="Circle" color={color} />
|
||||
<Text color={color} fontSize={0}>
|
||||
{children}
|
||||
</Text>
|
||||
|
||||
@ -1,41 +1,34 @@
|
||||
import React from "react";
|
||||
import { useField } from "formik";
|
||||
import styled from "styled-components";
|
||||
import { Col, Label, Row, Box, ErrorLabel } from "@tlon/indigo-react";
|
||||
import {
|
||||
Col,
|
||||
Label,
|
||||
Row,
|
||||
Box,
|
||||
ErrorLabel,
|
||||
StatelessTextInput as Input,
|
||||
} from "@tlon/indigo-react";
|
||||
|
||||
import { uxToHex, hexToUx } from "~/logic/lib/util";
|
||||
|
||||
const Input = styled.input`
|
||||
background-color: ${ p => p.theme.colors.white };
|
||||
color: ${ p => p.theme.colors.black };
|
||||
box-sizing: border-box;
|
||||
border: 1px solid;
|
||||
border-right: none;
|
||||
border-color: ${(p) => p.theme.colors.lightGray};
|
||||
border-top-left-radius: ${(p) => p.theme.radii[2]}px;
|
||||
border-bottom-left-radius: ${(p) => p.theme.radii[2]}px;
|
||||
padding: ${(p) => p.theme.space[2]}px;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
`;
|
||||
|
||||
type ColorInputProps = Parameters<typeof Col>[0] & {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
};
|
||||
|
||||
export function ColorInput(props: ColorInputProps) {
|
||||
const { id, label, ...rest } = props;
|
||||
const [{ value }, { error }, { setValue }] = useField(id);
|
||||
const { id, label, caption, ...rest } = props;
|
||||
const [{ value, onBlur }, meta, { setValue }] = useField(id);
|
||||
|
||||
const hex = value.substr(2).replace('.', '');
|
||||
const padded = hex.padStart(6, '0');
|
||||
const hex = value.substr(2).replace(".", "");
|
||||
const padded = hex.padStart(6, "0");
|
||||
|
||||
const onChange = (e: any) => {
|
||||
const { value: newValue } = e.target as HTMLInputElement;
|
||||
const valid = newValue.match(/^(\d|[a-f]|[A-F]){0,6}$/);
|
||||
|
||||
if(!valid) {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const result = hexToUx(newValue);
|
||||
@ -43,10 +36,21 @@ export function ColorInput(props: ColorInputProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Col {...rest}>
|
||||
<Box display="flex" flexDirection="column" {...props}>
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
<Row mt={2}>
|
||||
<Input onChange={onChange} value={hex} />
|
||||
{caption ? (
|
||||
<Label mt="2" gray>
|
||||
{caption}
|
||||
</Label>
|
||||
) : null}
|
||||
<Row mt="2" alignItems="flex-end">
|
||||
<Input
|
||||
borderTopRightRadius={0}
|
||||
borderBottomRightRadius={0}
|
||||
onBlur={onBlur}
|
||||
onChange={onChange}
|
||||
value={hex}
|
||||
/>
|
||||
<Box
|
||||
borderBottomRightRadius={1}
|
||||
borderTopRightRadius={1}
|
||||
@ -58,7 +62,9 @@ export function ColorInput(props: ColorInputProps) {
|
||||
bg={`#${padded}`}
|
||||
/>
|
||||
</Row>
|
||||
<ErrorLabel mt="2">{error}</ErrorLabel>
|
||||
</Col>
|
||||
<ErrorLabel mt="2" hasError={!!(meta.touched && meta.error)}>
|
||||
{meta.error}
|
||||
</ErrorLabel>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import React, { useRef, useCallback, useState } from "react";
|
||||
|
||||
import { Box, ManagedTextInputField as Input, Button } from "@tlon/indigo-react";
|
||||
import GlobalApi from "~/api/global";
|
||||
import {
|
||||
Box,
|
||||
StatelessTextInput as Input,
|
||||
Row,
|
||||
Button,
|
||||
Label,
|
||||
ErrorLabel,
|
||||
} from "@tlon/indigo-react";
|
||||
import { useField } from "formik";
|
||||
import { S3State } from "~/types/s3-update";
|
||||
import { useS3 } from "~/logic/lib/useS3";
|
||||
@ -10,16 +16,17 @@ type ImageInputProps = Parameters<typeof Box>[0] & {
|
||||
id: string;
|
||||
label: string;
|
||||
s3: S3State;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export function ImageInput(props: ImageInputProps) {
|
||||
const { id, label, s3, ...rest } = props;
|
||||
const { id, label, s3, caption, placeholder, ...rest } = props;
|
||||
|
||||
const { uploadDefault, canUpload } = useS3(s3);
|
||||
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const [, , { setValue, setError }] = useField(id);
|
||||
const [field, meta, { setValue, setError }] = useField(id);
|
||||
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
@ -44,29 +51,44 @@ export function ImageInput(props: ImageInputProps) {
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<Box {...rest} display="flex">
|
||||
<Input disabled={uploading} type="text" label={label} id={id} />
|
||||
{canUpload && (
|
||||
<>
|
||||
<Button
|
||||
ml={1}
|
||||
border={3}
|
||||
borderColor="washedGray"
|
||||
style={{ marginTop: "18px" }}
|
||||
onClick={onClick}
|
||||
>
|
||||
{uploading ? "Uploading" : "Upload"}
|
||||
</Button>
|
||||
<input
|
||||
style={{ display: "none" }}
|
||||
type="file"
|
||||
id="fileElement"
|
||||
ref={ref}
|
||||
accept="image/*"
|
||||
onChange={onImageUpload}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Box display="flex" flexDirection="column" {...props}>
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{caption ? (
|
||||
<Label mt="2" gray>
|
||||
{caption}
|
||||
</Label>
|
||||
) : null}
|
||||
<Row mt="2" alignItems="flex-end">
|
||||
<Input
|
||||
type={"text"}
|
||||
hasError={meta.touched && meta.error !== undefined}
|
||||
placeholder={placeholder}
|
||||
{...field}
|
||||
/>
|
||||
{canUpload && (
|
||||
<>
|
||||
<Button
|
||||
ml={1}
|
||||
border={3}
|
||||
borderColor="washedGray"
|
||||
onClick={onClick}
|
||||
>
|
||||
{uploading ? "Uploading" : "Upload"}
|
||||
</Button>
|
||||
<input
|
||||
style={{ display: "none" }}
|
||||
type="file"
|
||||
id="fileElement"
|
||||
ref={ref}
|
||||
accept="image/*"
|
||||
onChange={onImageUpload}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
<ErrorLabel mt="2" hasError={!!(meta.touched && meta.error)}>
|
||||
{meta.error}
|
||||
</ErrorLabel>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user