c0b2754 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

feat: place accessory on top of input, fix email input label

c0b2754Matt Condon (shrugs)7 years ago

src/indigo-react/components/Input.js+12−5

compare with master

unifiedsplit

@@ -73,13 +73,13 @@ export default function Input({

73 <Flex.Item as="label" className="f6 lh-tall" htmlFor={name}>

74 {label}

75 </Flex.Item>

76− <Flex.Item as={Flex} row>

76+ <Flex.Item as={Flex} className="rel" row>

77 <Flex.Item

78 as="input"

79 {...rest}

80 cols={[1, accessory ? 11 : 13]}

81 className={cn(

82− 'b b1 p3 outline-none',

82+ 'rel b b1 p3 outline-none',

83 { mono },

84 {

85 'bg-white': !disabled,

@@ -110,10 +110,17 @@ export default function Input({

110 flex

111 />

112 {accessory && (

113− <Flex.Item

113+ <div

114+ className="abs"

115+ style={{

116+ top: 0,

117+ right: 0,

118+ height: '100%',

119+ width: '44px',

114− style={{ height: '45px', width: '45px', overflow: 'hidden' }}>

120+ overflow: 'hidden',

121+ }}>

115 {accessory}

122 {accessory}

116− </Flex.Item>

123+ </div>

117 )}

124 )}

118 </Flex.Item>

125 </Flex.Item>

119 {error && (

126 {error && (

src/views/Invite/InviteEmail.js+11−5

@@ -84,10 +84,17 @@ const kFailureAccessory = '×';

84// world's simplest uid

85let id = 0;

86const buildInputConfig = (extra = {}) =>

87− buildEmailInputConfig({ name: `email-${id++}`, ...extra });

87+ buildEmailInputConfig({

88+ name: `email-${id++}`,

89+ placeholder: 'Email Address',

90+ ...extra,

91+ });

89const buildAccessoryFor = (dones, errors) => name => (

93const buildAccessoryFor = (dones, errors) => name => (

94+ <Flex

90− <Flex justify="center" align="center" style={{ height: '100%' }}>

95+ justify="center"

96+ align="center"

97+ style={{ height: '100%', width: '100%' }}>

91 {(() => {

98 {(() => {

92 if (dones[name]) return kSuccessAccessory;

99 if (dones[name]) return kSuccessAccessory;

93 if (errors[name]) return kFailureAccessory;

100 if (errors[name]) return kFailureAccessory;

@@ -117,7 +124,7 @@ export default function InviteEmail() {

117 inputConfigs,

124 inputConfigs,

118 { append: appendInput, removeAt: removeInputAt },

125 { append: appendInput, removeAt: removeInputAt },

119 ] = useArray(

126 ] = useArray(

120− [buildInputConfig({ placeholder: 'Email Address' })],

127+ [buildInputConfig({ label: 'Email Address' })],

121 buildInputConfig

128 buildInputConfig

122 );

129 );

123

130

@@ -125,7 +132,7 @@ export default function InviteEmail() {

125 const [hovered, setHovered] = useSetState();

132 const [hovered, setHovered] = useSetState();

126 const [invites, addInvite, clearInvites] = useSetState();

133 const [invites, addInvite, clearInvites] = useSetState();

127 const [receipts, addReceipt, clearReceipts] = useSetState();

134 const [receipts, addReceipt, clearReceipts] = useSetState();

128− const [errors, addError, clearError] = useSetState();

135+ const [errors, addError, clearErrors] = useSetState();

129

136

130 const [status, setStatus] = useState(STATUS.INPUT);

137 const [status, setStatus] = useState(STATUS.INPUT);

131 const [needFunds, setNeedFunds] = useState(null);

138 const [needFunds, setNeedFunds] = useState(null);

@@ -135,7 +142,6 @@ export default function InviteEmail() {

135 const canSend = status === STATUS.CAN_SEND;

142 const canSend = status === STATUS.CAN_SEND;

136 const isGenerating = status === STATUS.GENERATING;

143 const isGenerating = status === STATUS.GENERATING;

137 const isSending = status === STATUS.SENDING;

144 const isSending = status === STATUS.SENDING;

138− const isFunding = status === STATUS.FUNDING;

139 const isFailed = status === STATUS.FAILURE;

145 const isFailed = status === STATUS.FAILURE;

140 const isDone = status === STATUS.SUCCESS;

146 const isDone = status === STATUS.SUCCESS;

141

147