git.iko.soy/bridge
on master help sign in
feat: place accessory on top of input, fix email input label
commitc0b27544d9295e1b68aa6389cf86e67531648036 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateWed 26 Jun 2019, 14:26 (7 years ago) parent8ab98a7
2 files changed+23−10
compare with master
unifiedsplit
src/indigo-react/components/Input.js+12−5 src/views/Invite/InviteEmail.js+11−5
src/indigo-react/components/Input.js+12−5
@@ -73,13 +73,13 @@ export default function Input({
7373 <Flex.Item as="label" className="f6 lh-tall" htmlFor={name}>
7474 {label}
7575 </Flex.Item>
76− <Flex.Item as={Flex} row>
76+ <Flex.Item as={Flex} className="rel" row>
7777 <Flex.Item
7878 as="input"
7979 {...rest}
8080 cols={[1, accessory ? 11 : 13]}
8181 className={cn(
82− 'b b1 p3 outline-none',
82+ 'rel b b1 p3 outline-none',
8383 { mono },
8484 {
8585 'bg-white': !disabled,
@@ -110,10 +110,17 @@ export default function Input({
110110 flex
111111 />
112112 {accessory && (
113− <Flex.Item
114− style={{ height: '45px', width: '45px', overflow: 'hidden' }}>
113+ <div
114+ className="abs"
115+ style={{
116+ top: 0,
117+ right: 0,
118+ height: '100%',
119+ width: '44px',
120+ overflow: 'hidden',
121+ }}>
115122 {accessory}
116− </Flex.Item>
123+ </div>
117124 )}
118125 </Flex.Item>
119126 {error && (
src/views/Invite/InviteEmail.js+11−5
@@ -84,10 +84,17 @@ const kFailureAccessory = '×';
8484// world's simplest uid
8585let id = 0;
8686const buildInputConfig = (extra = {}) =>
87− buildEmailInputConfig({ name: `email-${id++}`, ...extra });
87+ buildEmailInputConfig({
88+ name: `email-${id++}`,
89+ placeholder: 'Email Address',
90+ ...extra,
91+ });
8892
8993const buildAccessoryFor = (dones, errors) => name => (
90− <Flex justify="center" align="center" style={{ height: '100%' }}>
94+ <Flex
95+ justify="center"
96+ align="center"
97+ style={{ height: '100%', width: '100%' }}>
9198 {(() => {
9299 if (dones[name]) return kSuccessAccessory;
93100 if (errors[name]) return kFailureAccessory;
@@ -117,7 +124,7 @@ export default function InviteEmail() {
117124 inputConfigs,
118125 { append: appendInput, removeAt: removeInputAt },
119126 ] = useArray(
120− [buildInputConfig({ placeholder: 'Email Address' })],
127+ [buildInputConfig({ label: 'Email Address' })],
121128 buildInputConfig
122129 );
123130
@@ -125,7 +132,7 @@ export default function InviteEmail() {
125132 const [hovered, setHovered] = useSetState();
126133 const [invites, addInvite, clearInvites] = useSetState();
127134 const [receipts, addReceipt, clearReceipts] = useSetState();
128− const [errors, addError, clearError] = useSetState();
135+ const [errors, addError, clearErrors] = useSetState();
129136
130137 const [status, setStatus] = useState(STATUS.INPUT);
131138 const [needFunds, setNeedFunds] = useState(null);
@@ -135,7 +142,6 @@ export default function InviteEmail() {
135142 const canSend = status === STATUS.CAN_SEND;
136143 const isGenerating = status === STATUS.GENERATING;
137144 const isSending = status === STATUS.SENDING;
138− const isFunding = status === STATUS.FUNDING;
139145 const isFailed = status === STATUS.FAILURE;
140146 const isDone = status === STATUS.SUCCESS;
141147